<template>
	<view class="my">
		<view class="userbox">
			<view class="user">
				<view class="headpic">
					<image src="../../static/logo.png" class="headpicIcon"></image>
				</view>
				<view class="u_info">
					<text class="name">zeishuai</text><br />
					<view class="tags">
						<view class="tag">普通用户</view>
						<view class="tag upgrade">升级</view>
					</view>
				</view>
				<view class="setUp" @click="toPage('/pages/my/setUp/setUp')">
					<image src="../../static/svg/setup.svg" class="setUpIcon"></image>
				</view>
			</view>
			<view class="money">
				<div class="mbox" @click="toPage('/pages/my/cwRecord/cwRecord')">
					<strong><text>0.000</text></strong><br />
					<text class="tips">累计提现（元）</text>
				</div>
				<div class="mbox"  @click="toPage('/pages/my/cashWithdrawal/cashWithdrawal')">
					<strong><text>0.000</text></strong><br />
					<text class="tips">可提现（元）</text>
				</div>
			</view>
		</view>

		<view class="menuBox">
			<view class="menuItem" @click="toPage('/pages/my/myOrder/myOrder')">
				<image src="../../static/logo.png" class="icon"></image>
				<text>我的订单</text>
			</view>
			<view class="menuItem" @click="toPage('/pages/my/help/help')">
				<image src="../../static/logo.png" class="icon"></image>
				<text>帮助文档</text>
			</view>
			<view class="menuItem" @click="toPage('/pages/customerService/customerService')">
				<image src="../../static/logo.png" class="icon"></image>
				<text>在线客服</text>
			</view>
			<!-- <view class="menuItem" @click="toPage('/pages/my/about/about')">
				<image src="../../static/logo.png" class="icon"></image>
				<text>关于小程序</text>
			</view> -->
		</view>

		<view class="outLogin">退出登录</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			toPage(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss">
	@import '../../static/style/mixin.scss';

	.my {
		@include bg1;
		padding-top: 20upx;

		.userbox {
			width: 720upx;
			height: auto;
			margin: auto;
			border-radius: 10upx;
			background-color: #fff;
			padding-bottom: 30upx;

			.user {
				display: flex;

				.headpic {
					width: 200upx;
					height: 200upx;

					@include cc;

					.headpicIcon {
						height: 150upx;
						width: 150upx;
						border-radius: 50%;
					}
				}

				.u_info {
					width: 400upx;
					height: 200upx;
					@include vcc;
					align-items: flex-start;

					.name {
						font-size: 60upx;
					}

					.tags {
						display: flex;

						.tag {
							border: 1px solid #00ff00;
							padding: 5upx 10upx;
							font-size: 20upx;
							margin-right: 10upx;
							border-radius: 10upx;
						}

						.upgrade {
							border: 1px solid red;
						}
					}

				}

				.setUp {
					width: 200upx;
					height: 200upx;

					@include cc;

					.setUpIcon {
						width: 50upx;
						height: 50upx;
					}
				}
			}

			.money {
				display: flex;

				.mbox {
					width: 50%;
					text-align: center;
					font-size: 40upx;

					.tips {
						font-size: 25upx;
					}
				}
			}
		}

		.menuBox {
			width: 720upx;
			padding: 0 0 20upx 20upx;
			box-sizing: border-box;
			border-radius: 10upx;
			background-color: #fff;
			margin: 20upx auto;
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;

			.menuItem {
				width: 330upx;
				height: 100upx;
				margin-right: 20upx;
				background-image: linear-gradient(90deg, aqua, #f89);
				border-radius: 10upx;
				margin-top: 20upx;
				@include cc;
				justify-content: flex-start;
				padding-left: 20upx;
				box-sizing: border-box;

				.icon {
					width: 60upx;
					height: 60upx;
					margin-right: 20upx;
				}
			}
		}

		.outLogin {
			width: 720upx;
			height: 100upx;
			@include cc;
			border-radius: 10upx;
			background-image: linear-gradient(90deg, aqua, #f89);
			margin: 20upx auto;
		}
	}
</style>
